<template>
	<scroll-view scroll-y>
		<view class="header">
			<view class="nav" :style="{top:top+'px',height:height+'px'}">
				<view class="nav_icon" @click="back">
					<uni-icons type="arrowleft" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<!-- <view class="topBar">
					<view :class="{active:active}" @click="active=true">
						<view>
							红包
						</view>
					</view>
					<view :class="{active:!active}" @click="active=false">
						<view>
							金币
						</view>
					</view>
				</view> -->
			</view>
			<view class="ruls" @click="ruls">
				排行榜说明
			</view>
			<view class="shopping_box">
				<view class="shopping" @click="goShopping(true)">去赚红包</view>
				<view class="shopping" @click="goShopping(false)">领取奖励</view>
			</view>
			<view class="user_box" v-for="(item,index) in rankingTopList" :key='index' :class="'logo'+(index+1)">
				<view class="user_logo">
					<view class="user_ranking" :class="'ranking'+(index+1)"></view>
					<view class="user_logo_image">
						<image :src="item.headimgurl" mode=""></image>
					</view>
				</view>
				<view class="user_name">
					{{item.nickname || ''}}
				</view>
				<view class="ranking_price" v-if="active">
					<text v-if="item.income">{{item.income }}元</text>
				</view>
				<view class="ranking_price" v-else>
					<text v-if="item.rankingReward">{{item.rankingReward}}</text>
				</view>
			</view>
		</view>
		<view class="list_box">
			<view class="list_box_title">每日幸运达人排名</view>
			<view class="list_center">
				<view v-if="rankingDataList.length>0" style="flex:1">
					<view class="list_item" v-for="(item,index) in rankingDataList" :key='index'
						:style="{backgroundColor:item.isMyRanking?'rgba(250, 101, 61, 0.14)':''}">
						<view>
							<view class="user_icon">
								<image :src="item.headimgurl" mode=""></image>
							</view>
							<view class="user_number">{{item.nickname || '　　'}}</view>
						</view>
						<view class="indexes">第{{maping[item.ranking]}}名</view>
						<view class="user_selling_Price" v-if="active">
							￥{{item.income }}
						</view>
						<view class="user_selling_Price" v-else>
							<view class="currency">
								<image :src="IMGLink+'/index/currency.png'" mode=""></image>
							</view>
							<text>
								{{item.rankingReward}}
							</text>
						</view>
					</view>
				</view>
				<view v-else class="no_ranking">
					<view>
						<view>
							暂无排名</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user_my" v-if="userinfo&&userinfo.ranking_info&&userinfo.ranking_info.myRanking>10">
			<view>
				<view class="user_my_icon">
					<image :src="userinfo.headimgurl" mode=""></image>
				</view>
				<view>{{userinfo.nickname ||''}}</view>
			</view>
			<view class="no_ranking_text">
				暂无排名
			</view>
			<view>￥{{userinfo.ranking_info && userinfo.ranking_info.myIncome || 0}}</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		rankingList,
		receiveReward
	} from '@/api/index/index'
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				top: 20,
				height: 25,
				rankingTopList: [],
				rankingDataList: [],
				isGo: false,
				active: true,
				refresh: false,
				maping: {
					1: '一',
					2: '二',
					3: '三',
					4: '四',
					5: '五',
					6: '六',
					7: '七',
					8: '八',
					9: '九',
					10: '十',
				}
			}
		},
		computed: {
			...mapState(["userinfo"])
		},
		watch:{
			userinfo:{
				handler(val){
					if(val.ranking_info){
						this.getData();
					}
				},
				deep:true,
				immediate: true
			}
		},
		onLoad() {
			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			this.top = uni.getMenuButtonBoundingClientRect().top;
			this.height = uni.getMenuButtonBoundingClientRect().height;
			//#endif
			
		},
		onShow() {
			if (this.refresh) {
				this.$store.dispatch("updateUserInfo");
			}
		},
		beforeDestroy() {
			if (this.isGo) {
				uni.switchTab({
					url: '/pages/shopping/shopping'
				})
			}
		},
		methods: {
			ruls() {
				uni.navigateTo({
					url: '/pagesA/my/rules/ruleDetail?type=20'
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				rankingList().then(({
					data: {
						list: list
					}
				}) => {
					const [rankingTopList, rankingDataList] = [
						[],
						[]
					];
					for (let i = 0; i < list.length; i++) {
						const item = list[i];
						item.isMyRanking = this.userinfo.ranking_info.myRanking == i + 1;
						item.ranking = i + 1;
						if (i < 3) {
							rankingTopList.push(item)
						} else {
							rankingDataList.push(item);
						}
					}
					this.rankingDataList = rankingDataList;
					this.rankingTopList = this.handlerRankList(rankingTopList);
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			getReceiveReward() {
				receiveReward().then(res => {
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					this.getData()
				})
			},
			handlerRankList(arr) {
				if (arr.length != 3) {
					for (let i = 0; i < 3; i++) {
						if (!arr[i]) {
							arr.push({
								nickname: '虚位以待'
							})
						}
					}
				}
				return arr;
			},
			back() {
				let pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: "/pages/index/home/index"
					})
				}

			},
			goShopping(flag) {
				if (flag) {
					this.goShoppingPage()
				} else {
					const {
						userinfo: {
							user_level_id: isVip,
							ranking_info: {
								reward_receive_status: status,
								commonRankingReward
							}
						},
					} = this;
					/*
					 reward_receive_status  奖励领取状态0：无奖励 1已领取 2未领取
					 user_level_id  0-非会员 1-会员 2-正在审核中
					*/
					if (status == 0) {
						uni.showModal({
							title: '非常遗憾',
							content: '您昨日奖励为0',
							cancelText: '关闭',
							confirmText: '去赚红包',
							success: res => {
								if (res.confirm) {
									this.goShoppingPage()
								}
							}
						})
					} else if (status == 1) {
						uni.showToast({
							title: '您已领取奖励',
							icon: 'none'
						})
					} else {
						if (isVip == 1) {
							this.getReceiveReward()
						} else {
							uni.showModal({
								title: '领取奖励',
								content: `恭喜您获得${commonRankingReward}的币奖励`,
								cancelText: '正常领取',
								confirmText: '翻倍领取',
								success: res => {
									if (res.confirm) {
										this.refresh = true;
										uni.navigateTo({
											url: '/pagesA/my/vips/myvip'
										})
									} else {
										this.getReceiveReward()
									}
								}
							})
						}
					}
				}
			},
			getReceiveReward() {
				uni.showLoading({
					title: '加载中'
				});
				receiveReward().then(res => {
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					this.$store.dispatch("updateUserInfo");
				}).catch(e => {
					uni.hideLoading()
				})
			},
			goShoppingPage() {
				this.isGo = true;
				uni.navigateBack();
			},
			onShareAppMessage() {
				return {
					title: '排行榜',
					path: '/pages/index/ranking-list/ranking-list'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	scroll-view {
		font-family: PingFangSC-Medium, PingFang SC;
	}

	.header {
		height: 896rpx;
		background-image: url($img-link+'/index/bg.png');
		background-size: 100%;
		position: relative;
	}

	.nav {
		position: fixed;
		box-sizing: border-box;
		width: 100%;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		z-index: 999;

	}

	.nav_icon {
		position: absolute;
		left: 24rpx;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.shopping_box {
		position: absolute;
		top: 644rpx;
		width: 100%;
		left: 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 96rpx;
	}

	.shopping {
		width: 262rpx;
		height: 84rpx;
		background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
		box-shadow: 0 20rpx 36rpx 0 rgba(238, 73, 43, 0.25);
		border-radius: 42rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.list_box {
		margin-top: -134rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		z-index: 9;
		box-sizing: border-box;
		padding: 44rpx 0;
		margin-bottom: calc(82rpx + env(safe-area-inset-bottom));
	}

	.user_box {
		position: absolute;
		width: 172rpx;
	}

	.user_logo {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		background: url($img-link+'/index/circular.png') center;
		background-size: 100%;
		margin-bottom: 20rpx;
		position: relative;
		background-color: #F54642;
		box-sizing: border-box;
		padding: 14rpx;
	}

	.user_logo_image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.user_name {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 68rpx;
		min-height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.user_ranking {
		width: 84rpx;
		height: 64rpx;
		position: absolute;
		left: 50%;
		margin-left: -42rpx;
		bottom: -20rpx;
		z-index: 9;
	}

	.logo1 {
		top: 190rpx;
		left: 50%;
		margin-left: -86rpx;
	}

	.ranking1 {
		background: url(../../../static/image/index/one.png);
		background-size: 100%;
	}

	.logo2 {
		top: 254rpx;
		left: 84rpx;
	}

	.ranking2 {
		background: url(../../../static/image/index/two.png);
		background-size: 100%;
	}

	.logo3 {
		top: 278rpx;
		right: 78rpx;
	}

	.ranking3 {
		background: url(../../../static/image/index/three.png);
		background-size: 100%;
	}

	.ranking_price {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #F54642;
	}

	.list_box_title {
		font-size: 32rpx;
		font-weight: 400;
		color: #383838;
		margin-bottom: 28rpx;
		box-sizing: border-box;
		padding: 0 26rpx;
	}

	.noHeight {
		height: auto !important;
	}

	.list_center {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_item {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 24rpx 26rpx;
		position: relative;
	}

	.list_item>view {
		display: flex;
		align-items: center;
	}

	.indexes {
		font-size: 28rpx;
		font-weight: 400;
		color: #383838;
		position: absolute;
		right: 250rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.user_icon {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 40rpx;
	}

	.user_number {
		font-size: 32rpx;
		font-weight: 400;
		color: #383838;
	}

	.user_selling_Price {
		font-size: 32rpx;
		font-weight: 400;
		color: #383838;
	}

	.user_my {
		position: fixed;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 126rpx;
		background-color: #fff6dc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;
		box-sizing: border-box;
		padding-left: 46rpx;
		padding-right: 26rpx;
	}

	.user_my>view {
		display: flex;
		font-size: 32rpx;
		color: #383838;
		align-items: center;
	}

	.user_my_icon {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 28rpx;
	}

	.topBar {
		width: 324rpx;
		height: 60rpx;
		border-radius: 8rpx;
		border: 2rpx solid #FFFFFF;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		overflow: hidden;
	}

	.topBar>view {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		background-color: #F54642;
		height: 100%;
	}

	.active {
		background-color: #FFFFFF !important;
		color: #F54642;
	}

	.currency {
		display: inline-block;
		width: 40rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.no_ranking {
		display: flex;
		min-height: 300rpx;
		align-items: center;
		flex: 1;
		justify-content: center;
	}

	.no_ranking_text {
		font-size: 28rpx !important;
		font-weight: 400 !important;
		color: #383838 !important;
	}

	.ruls {
		position: absolute;
		top: 100rpx;
		right: 0;
		width: 180rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 0.16);
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		border-right: none;
	}
</style>
